<template>
  <div ref="chartDom"/>
</template>

<script setup>
import {nextTick, onMounted, onUnmounted, ref} from 'vue';
import * as echarts from 'echarts';

const chartDom = ref(null);
let chartInstance = null;

onMounted(async () => {
  await nextTick();
  chartInstance = echarts.init(chartDom.value);
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['企业数 (户)'],
      right: '10%'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['0.6倍及以下', '0.6-0.7倍', '0.7-0.8倍', '0.8-0.9倍', '0.9-1倍', '1倍以上'],
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '企业数 (户)',
        type: 'bar',
        barWidth: '60%',
        data: [3, 6, 7, 10, 7, 2],
        itemStyle: {
          color: '#3A7DFF'
        }
      }
    ]
  };
  chartInstance.setOption(option);
});

onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});
</script>

<style scoped>

</style>